<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="description" content="不超过150个字符" />
    <meta name="keywords" content="" />
    <meta content="caibaojian" name="author" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="../static/css/orders.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <!-- 设计稿 1rem = 100px -->
    <script src="../static/js/flexible.js"></script>
    <!-- 滚动插件 -->
    <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
    <title>麦谷道</title>
</head>

<body>
    <div class="orders-container">
        <div class="top-bar"><span class="goback"></span>我的订单</div>

        <div class="tab-wrapper">
            <!-- 分页器 -->
            <div class="swiper-pagination flex-r-b"></div>
            <div class="swiper-container order-swiper">
                <div class="swiper-wrapper">
                    <!-- 全部订单 -->
                    <div class="swiper-slide scroll1">
                        <div class="content">
                            <!-- 订单1 -->
                            <div class="order-card">
                                <div class="title flex-r-b">
                                    <span>订单号：123445664654</span>
                                    <span class="status">交易成功</span>
                                </div>
                                <div class="middle flex-r-b">
                                    <div class="img">
                                        <img src="../static/images/index/img_9.png" alt="">
                                    </div>
                                    <div class="right flex-c-b">
                                        <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                                        <p class="size">尺寸：6寸 （订单已满299免邮）</p>
                                        <p class="flex-r-b">
                                            <span class="price">￥198</span>
                                            <span>x1</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="bottom flex-r-b">
                                    <div class="btn">订单详情</div>
                                    <div class="btn">配送状态</div>
                                    <div class="btn">查看评价</div>
                                </div>
                            </div>
                            <div class="order-card">
                                <div class="title flex-r-b">
                                    <span>订单号：123445664654</span>
                                    <span class="status">交易成功</span>
                                </div>
                                <div class="middle flex-r-b">
                                    <div class="img">
                                        <img src="../static/images/index/img_9.png" alt="">
                                    </div>
                                    <div class="right flex-c-b">
                                        <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                                        <p class="size">尺寸：6寸 （订单已满299免邮）</p>
                                        <p class="flex-r-b">
                                            <span class="price">￥198</span>
                                            <span>x1</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="bottom flex-r-b">
                                    <div class="btn">订单详情</div>
                                    <div class="btn">配送状态</div>
                                    <div class="btn">查看评价</div>
                                </div>
                            </div>
                            <div class="order-card">
                                <div class="title flex-r-b">
                                    <span>订单号：123445664654</span>
                                    <span class="status">交易成功</span>
                                </div>
                                <div class="middle flex-r-b">
                                    <div class="img">
                                        <img src="../static/images/index/img_9.png" alt="">
                                    </div>
                                    <div class="right flex-c-b">
                                        <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                                        <p class="size">尺寸：6寸 （订单已满299免邮）</p>
                                        <p class="flex-r-b">
                                            <span class="price">￥198</span>
                                            <span>x1</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="bottom flex-r-b">
                                    <div class="btn">订单详情</div>
                                    <div class="btn">配送状态</div>
                                    <div class="btn">查看评价</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide scroll2">
                        <div class="content">2</div>
                    </div>
                    <div class="swiper-slide scroll3">
                        <div class=".content">3</div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</body>
<script>
   (function () {
        window.onload = function () {
            goBack()
            initTabSwiper()
            initScrolls()
        }
        var orders = {}
        // 路由返回
        function goBack() {
            document.querySelector('.goback').ontouchend = function () {
                window.history.go(-1)
            }
        }

        // tab分页 swiper
        function initTabSwiper() {
            var text = ['全部订单', '待支付', "待收货"]
            orders.swiper2 = new Swiper('.order-swiper', {
                iOSEdgeSwipeDetection: true,
                iOSEdgeSwipeThreshold: 50,
                spaceBetween: 5,
                autoHeight: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '">' + text[index] + '</span>';
                    },
                }
            })
        }

        // 分页 初始化滚动
        function initScrolls() {
            var options = {
                click:true,
                probeType:3,
                pullDownRefresh: {
                    threshold: 50,
                    stop: 40
                },
                pullUpLoad: {
                     threshold: -50
                }
            }
            orders.scroll1 = new BScroll('.scroll1',options)
            orders.scroll2 = new BScroll('.scroll2',options)
            orders.scroll3 = new BScroll('.scroll3',options)

            orders.scroll1.on('pullingDown',function(){
                console.log('下拉刷新')
                setTimeout(function() {
                    this.finishPullDown()
                    this.refresh()
                }.bind(this), 1000);
            })
            orders.scroll1.on('pullingUp',function(){
                console.log('上拉加载')
                setTimeout(function() {
                    this.finishPullUp()
                    this.refresh()                    
                }.bind(this), 1000);
            })
        }
    })()
</script>
</html>